<template>
  <main @keydown.enter="loginAc">
      <div class="login-title">
        <h1>密码登录</h1>
      </div>
      <div class="login-container">
        <input type="text" placeholder="账号" v-model="tmpAccount.account">
        <input type="password" placeholder="密码" v-model="tmpAccount.password">
      </div>
      <div class="login-bt" >
        <button class="login-button" @click="loginAc" >登录</button>
        <a style="color: #515f7a" href="#" @click="toNextPage('/register')">免费注册</a>
      </div>
  </main>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref} from 'vue';

import {useRouter} from "vue-router";
const router = useRouter();

import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
const userInfoStore = useUserInfoStore();
const { accounts, userInfo, carList} = storeToRefs(userInfoStore);
  const tmpAccount = reactive({
    account:"",
    password:"",
  })

  const toNextPage = (url) => {
    router.push(url);
  }
  const loginAc = () => {
    let flag = false;
    for (let i = 0;i < accounts.value.length;i ++){
      if(accounts.value[i].account == tmpAccount.account && accounts.value[i].password == tmpAccount.password){
        userInfoStore.userInfo.userName = accounts.value[i].userName;
        userInfoStore.userInfo.userId = accounts.value[i].id;
        userInfoStore.userInfo.userImg = accounts.value[i].userImg;
        userInfoStore.userInfo.info = accounts.value[i].info;
        userInfoStore.userInfo.flag = true;
        for(let j = 0;j < carList.value.length;j ++){
          if(carList.value[j].userId == accounts.value[i].id){
            userInfoStore.userInfo.shopCars.push(carList.value[j]);
          }
        }
        flag = true;
        break;
      }
    }

    if(!flag)window.alert("账号不存在/密码错误,请检查账号密码！！！");
    else {

      toNextPage('/');
    }
  }
  // 生命周期钩子
  onBeforeMount(()=>{
    document.querySelector('body').setAttribute('style', 'background-color:#eeedf1');
  });
  onBeforeUnmount(()=>{
    document.querySelector('body').removeAttribute('style')
  });
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
main {
  width: 700px;
  height: 500px;
  justify-items: center;
  background-color: white;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.login-title {
  color: #FF5000;
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
}
input {
  background-color: #f1f4f7;
  margin-top: 10px;
  width: 60%;
  height: 25%;
  border: 0;
  border-radius: 10px;
  padding-left: 3%;
}
input:hover {
  background-color: #c8c8c9;
}

input:focus {
  outline: none;
  background-color: #c8c8c9;
}
.login-bt {
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  width: 100%;
  height: 30%;
}
.login-button {
  display: inline-block;
  width: 63%;
  height: 50%;
  background-color: #FF5000;
  color: white;
  border: 0;
  margin-bottom: 20px;
  font-size: 20px;
}
button:focus {
  outline: none;
}
button:hover {
  background-color: #ed320c;
}
</style>
